<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <title>用户工序设置</title>
</head>

<body>
  <div id="app" v-loading.fullscreen.lock="loading">
    <div class="user-procedure">
      <div class="user-procedure-search clearfix">
        <el-form inline size="medium">
          <el-form-item label="用户名">
            <el-input style="width:200px" v-model="search.userName"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchData">查询</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div class="user-procedure-table-div">
        <el-table fit stripe border :data="procedureList" style="width: 100%" height="parent">
          <el-table-column label="用户名" prop="name" width="150px" align="center"></el-table-column>
          <el-table-column label="用户工序" header-align="center">
            <template slot-scope="scope" v-if="scope.row.workshopProcedures.length>0">
              <template v-for="workshopProcedure in scope.row.workshopProcedures">
                <div v-if="workshopProcedure.processList.length>0" :key="workshopProcedure.id" class="procedure-item-div">
                  <procedure-item :workshop-procedure="workshopProcedure" :procedure="scope.row" :is-remove="scope.row.hasRemove">
                  </procedure-item>
                </div>
              </template>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="125px" header-align="center">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="processSetting(scope.row)">设置</el-button>
              <el-button style="margin-left:0" size="mini" type="success" @click="processRemove(scope.row)">
                <span v-if="scope.row.hasRemove">完成</span>
                <span v-else>移除</span>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div v-if="pagination.totalCount!==0" style="text-align:right;margin-top:5px;">
        <el-pagination background :page-size="pagination.pageSize" :total="pagination.totalCount" :current-page.sync="pagination.currentPage"
          @current-change="pageChange"></el-pagination>
      </div>
    </div>

    <el-dialog title="设置用户工序" :visible.sync="openSetting" top="5vh" width="600px" @closed="settingClosed">
      <div style="height:calc(90vh - 54px);overflow:auto">
        <procedure-form v-if="selectProcedure!==null" :procedure="selectProcedure" @setting-success="settingSuccess"></procedure-form>
      </div>
    </el-dialog>
  </div>
</body>

<script src="myJs/importFile.js"></script>
<script>
  importFile([
    "./engineering/userProcedureSetting/css/procedureItem.css",
    "./engineering/userProcedureSetting/css/procedureForm.css"
  ]);

</script>
<script src="./engineering/userProcedureSetting/procedureItem.js"></script>
<script src="./engineering/userProcedureSetting/procedureForm.js"></script>

<script>
  var app = new Vue({
    el: '#app',
    data: function () {
      var search = {
        userName: ''
      };
      return {
        loading: false,
        search: _.cloneDeep(search),
        oldSearch: _.cloneDeep(search),
        procedureList: [],
        pagination: {
          currentPage: 1,
          totalCount: 0,
          pageSize: 10
        },
        openSetting: false,
        selectProcedure: null
      };
    },

    created: function () {
      this.setProcedureList(true);
    },

    methods: {
      setProcedureList: function (isSearch) {
        if (!isSearch) {
          this.search = _.cloneDeep(this.oldSearch);
        }

        var search = this.search;
        var pagination = this.pagination;
        var currentPage = pagination.currentPage;
        var pageSize = pagination.pageSize;
        var start = (currentPage - 1) * pageSize;
        var postData = {
          start: start,
          length: pageSize,
          userName: search.userName
        };

        this.loading = true;
        var self = this;
        ajaxRequest('orderProcedureTemplate/getUserProcedure', postData, false).then(function (res) {
          if (isSearch) {
            self.oldSearch = _.cloneDeep(self.search);
          }

          var procedureList = res.returnData;
          for (var i = 0; i < procedureList.length; i++) {
            var procedure = procedureList[i];
            var workshopProcedures = self.getWorkshopProcedures(procedure);
            procedure.workshopProcedures = workshopProcedures;
            procedure.hasRemove = false;
          }

          self.procedureList = procedureList;
          self.pagination.totalCount = res.iTotalRecords;
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      },

      getWorkshopProcedures: function (procedure) {
        var workShopList = procedure.workShopList;
        if (SysUtil.isEmpty(workShopList)) {
          return [];
        }

        var workshopProcedures = [];
        for (var i = 0; i < workShopList.length; i++) {
          var data = workShopList[i];
          var processList = data.processList;
          if (SysUtil.isEmpty(processList)) {
            processList = [];
          }
          processList = _.map(processList, function (processObj) {
            return {
              id: processObj.id,
              processName: processObj.processName
            };
          });
          processList = SysUtil.sortDataByColumns(processList, [{
            sortField: 'processName',
            sortType: 'asc'
          }]);

          workshopProcedures.push({
            id: data.id,
            workshopName: data.workshopName,
            processList: processList
          });
        }
        return workshopProcedures;
      },

      searchData: function () {
        this.pagination.currentPage = 1;
        this.setProcedureList(true);
      },

      pageChange: function () {
        this.setProcedureList();
      },

      processRemove: function (procedure) {
        var hasRemove = procedure.hasRemove;
        procedure.hasRemove = !hasRemove;
      },

      processSetting: function (procedure) {
        this.selectProcedure = procedure;
        this.openSetting = true;
      },

      settingSuccess: function () {
        this.openSetting = false;
        this.setProcedureList();
      },

      settingClosed: function () {
        this.selectProcedure = null;
      }
    },

    components: {
      ProcedureItem: ProcedureItem,
      ProcedureForm: ProcedureForm
    }
  });

</script>

<style>
  .user-procedure {
    padding: 10px 20px 5px;
    height: calc(100% - 15px);
    position: relative;
    display: flex;
    flex-direction: column;
  }

  .user-procedure .user-procedure-search .el-form-item {
    margin-bottom: 10px;
  }

  .user-procedure .user-procedure-table-div {
    flex: 1;
    overflow: auto;
  }

  .user-procedure .user-procedure-table-div .procedure-item-div {
    margin-bottom: 15px;
  }

  .user-procedure .user-procedure-table-div .procedure-item-div:last-child {
    margin-bottom: 0;
  }

</style>

</html>
